<template>
  <div class="yf-input">
    <div class="inp">
      <span class="label">{{label}}</span>
      <input ref="inp" v-model.trim="val" @blur.prevent="autoScroll" @click="show()" class="input"  :type="inputType" :disabled="disabled" :readonly="isReadOnly" :placeholder="pHolder">
    </div>
  </div>
</template>

<script>
import { parseTime } from '../../../util/time'

export default {
  data () {
    return {
      edus: [
        {
          text: '小学', value: '小学'
        },
        {
          text: '初中', value: '初中'
        },
        {
          text: '高中', value: '高中'
        },
        {
          text: '大专', value: '大专'
        },
        {
          text: '本科', value: '本科'
        }
      ],
      sexs: [
        {
          text: '男', value: '男'
        },
        {
          text: '女', value: '女'
        }
      ]
    }
  },
  computed: {
    inputType () {
      if (this.type === 'date') {
        return 'text'
      }
      return this.type
    },
    isReadOnly () {
      if (this.type !== 'text' && this.type !== 'number') {
        return 'readonly'
      }
      return false
    },
    val: {
      get: function () {
        if (this.type === 'date') {
          // 转化成需要显示的格式
          return parseTime(this.value, '{y}-{m}-{d}')
        } else {
          return this.value
        }
      },
      set: function (newVal) {
        this.$emit('input', newVal)
      }
    }
  },
  methods: {
    autoScroll () {
      const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
      window.scrollTo(0, Math.max(scrollHeight - 1, 0))
    },
    input ($event) {
      this.$emit('input', this.$refs.inp.value)
    },
    showPicker (title, data) {
      if (!this.picker) {
        this.picker = this.$createPicker({
          title: title,
          data: [data],
          onSelect: this.selectHandle
        })
      }
      this.picker.show()
    },
    show () {
      switch (this.type) {
        case 'sex':this.showSex(); break
        case 'edu':this.showEud(); break
        case 'date':this.showDate(); break
      }
    },
    showSex () {
      this.showPicker('性别', this.sexs)
    },
    showEud () {
      this.showPicker('学历', this.edus)
    },
    showDate () {
      this.datePicker = this.$createDatePicker({
        title: '时间',
        min: new Date(2000, 7, 8),
        max: new Date(),
        value: new Date(),
        format: {
          year: 'yyyy',
          month: 'MM',
          date: 'dd'
        },
        onSelect: this.selectDate
      })
      this.datePicker.show()
    },
    selectHandle (value) {
      this.$emit('input', value.join())
    },
    selectDate (value, index, text) {
      let result = text.join().replace(/,/g, '-')
      if (this.type === 'date') {
        // 因为这是后端统一的格式 所以转化一下
        result = result + ' 00:00:00'
      }
      this.$emit('input', result)
    }
  },
  props: {
    type: String,
    disabled: String,
    value: null,
    label: String,
    pHolder: String
  }
}
</script>

<style scoped lang="stylus">
  ::-webkit-input-placeholder { /* WebKit browsers */
    color #B9B7C0
    dpr-font(12px)
  }
  .yf-input
    .inp
      display flex
      flex-direction column
      .label
        color #B9B7C0
        dpr-font(12px)
        margin-bottom 7px
        margin-left 11px
      .input
        color #55545D
        background:rgba(245,244,247,1);
        border-radius:15px;
        height:36px;
        outline none
        border none
        padding-left 21px
        dpr-font(12Px)
        width auto
        &:disabled
          -webkit-text-fill-color: #55545D;
          -webkit-opacity: 1;
          color: #55545d;
</style>
